<%@ page import="ar.com.photo_admin.domain.User"%>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta name="layout" content="main">
<calendar:resources lang="en" theme="aqua"/>
</head>
<body>
	<div class="header_02"><g:message code="user.profile" /></div>

	<!-- Password Modal Panel -->
	<div class="modal hide fade" id="passwordModal">
		<g:if test="${user?.password}">
			<g:render template="/user/changePassword" />
		</g:if>
		<g:else>
			<g:render template="/user/generatePassword" />
		</g:else>
	</div>

	<g:form id="profileForm" name="profileForm" controller="user" method="post" enctype="multipart/form-data">
		
		<div id="notifications" class="profileNotifications">
			<g:if test="${flash.message}">
				<div class="alert alert-success">
					<a class="close" data-dismiss="alert">×</a>
					${flash.message}
				</div>
			</g:if>
			<g:if test="${flash.error}">
				<div class="alert alert-error">
					<a class="close" data-dismiss="alert">×</a>
					${flash.error}
				</div>
			</g:if>
		</div>
		
		<h1 id="prueba"></h1>
		
		<a class="fl thumbnail profilePhotoLink" onclick="$('input[id=imageFile]').click();">
			<img id="profilePhoto" src="${createLink(controller:'user', action:'profileImage', id:user?.id, params: ['type': user?.useFacebookProfileImage])}" class="profilePhoto"></img>
		</a>
		
		<input id="imageFile" name="imageFile" type="file" class="hidden">
		<g:actionSubmit id="uploadProfileImageButton" class="hidden" value="uploadProfileImageButton" action="uploadProfileImage" />
		
		<div class="fl">
			<h2>
				${user?.username}
			</h2>
			<g:textArea id="presentationText" class="presentationText" name="presentationText" value="${user?.presentationText}" rows="3" maxlength="200"
				placeholder="${message(code: 'user.profile.presentation')}"/>
		</div>
		<div class="cleaner"></div>
			
		<h3>
			<g:message code="user.profile.social.networks" />
		</h3>

		<div class="form-horizontal">
				<label class="control-label"><img src="${resource(dir:'images', file: 'facebook.png') }" alt="image"></img></label>
				
				<div class="profileFacebookInfo">
				
					<g:if test="${user?.facebookUid}">
						<h6><g:message code="user.profile.social.networks.facebook.connected.description"/></h6>
						
						<div class="profileFacebookButtons">
							<a class="btn btn-small" href="http://www.facebook.com/profile.php?ref=profile&id=${user?.facebookUid}" target="_blank">
								<g:message code="user.profile.social.networks.facebook.go"/></a>
							<g:link class="btn btn-small" controller="user" action="detachFacebookAccount"><g:message code="user.profile.social.networks.facebook.detach"/></g:link>
						</div>
					</g:if>
					<g:else>
						<h6 class="fl"><g:message code="user.profile.social.networks.facebook.attach"/>&nbsp;&nbsp;</h6>
						<fb:login-button id="facebookButton" class="facebookLoginButton"
							scope="email,publish_stream"
							onlogin="attachFacebookAccount();">
							<g:message code="auth.login.facebook" />
						</fb:login-button>
						
						<div class="cleaner"></div>
						
						<div id="facebookLoggedInUserInfo" class="profileFacebookButtons">
							<div id="facebookUser" class="fl">${message(code: 'auth.login.facebook.connected.user1')}<span id="facebookLoggedInUserName"></span>${message(code: 'auth.login.facebook.connected.user2')}</div>
							<a class="fl" href="javascript:void(0)" onclick="logoutSesionFBProfile();">
								<g:message code="auth.login.facebook.connected.user3"/></a>
						</div>
					</g:else>					
				</div>
					
				
				<div class="cleaner"></div>
				
				<g:if test="${user?.facebookUid}">
					<div class="control-label" style="margin-top: 4px;">
						<g:checkBox name="useFacebookProfileImageCheckBox" value="${user?.useFacebookProfileImage}" />
						<g:actionSubmit id="useFacebookProfileImageButton" class="hidden" value="useFacebookProfileImageButton" action="useFacebookProfileImage" />
					</div>
					
					<div class="profileFacebookInfo">
						<h6 class="fl"><g:message code="user.profile.image.facebook"/>&nbsp;&nbsp;</h6>
					</div>
				</g:if>
		</div>

		<div class="cleaner"></div>

		<h3><g:message code="user.profile.personal.data" /></h3>

		<div class="form-horizontal">
		
			<g:hasErrors bean="${user}">
				<g:eachError bean="${user}" var="error">
					<div id="signinErrors" class="alert alert-error">
						<a class="close" data-dismiss="alert">×</a>
						<g:message error="${error}" />
					</div>
				</g:eachError>
			</g:hasErrors>
			
			<g:hiddenField id="version" name="version" value="${user?.version}" />

			<div
				class="control-group ${hasErrors(bean: user, field: 'username', 'error')}">
				<label class="control-label" for="inputUserName"><g:message
						code="user.username" /></label>
				<div class="controls">
					<g:field id="inputUserName" class="input-large" type="text"
						name="username" value="${user?.username}"
						placeholder="${message(code: 'user.username')}"
						disabled="disabled" />
				</div>
			</div>
                            
			<div
				class="control-group ${hasErrors(bean: user, field: 'email', 'error')}">
				<label class="control-label" for="inputEmail"><g:message
						code="user.email" /></label>
				<div class="controls">
					<g:field id="inputEmail" class="input-large" type="text"
						name="email" value="${user?.email}"
						placeholder="${message(code: 'user.email')}"
						disabled="disabled" />
				</div>
			</div>
			
			<div
				class="control-group ${hasErrors(bean: user, field: 'address', 'error')}">
				<label class="control-label" for="inputAddress"><g:message
						code="user.address" /></label>
				<div class="controls">
					<g:field id="inputAddress" class="input-large" type="text"
						name="address" value="${user?.address}"
						placeholder="${message(code: 'user.address')}" />
				</div>
			</div>
			
			<div
				class="control-group ${hasErrors(bean: user, field: 'birthday', 'error')}">
				<label class="control-label" for="inputBirthday"><g:message
						code="user.birthday" /></label>
				<div class="controls">
					<calendar:datePicker id="birthday" dateFormat="%d/%m/%Y" name="birthday" defaultValue="${user?.birthday}" years="1900,2050"/>
				</div>
			</div>
			
			<div
				class="control-group ${hasErrors(bean: user, field: 'telephone', 'error')}">
				<label class="control-label" for="inputTelephone"><g:message
						code="user.telephone" /></label>
				<div class="controls">
					<g:field id="inputTelephone" class="input-large" type="text"
						name="telephone" value="${user?.telephone}"
						placeholder="${message(code: 'user.telephone')}" />
				</div>
			</div>
			
			<div
				class="control-group ${hasErrors(bean: user, field: 'captchaCode', 'error')}">
				<img class="control-label"
					src="${createLink(controller: 'simpleCaptcha', action: 'captcha')}"></img>

				<div class="controls">
					<g:field id="captchaCode" class="input-large" type="text"
						value="${user?.captchaCode}" name="captchaCode"
						placeholder="${message(code: 'user.captcha')}" />
				</div>
			</div>	
		</div>
	
		<div class="form-actions">
			<g:actionSubmit class="btn" value="${message(code:'default.save.label')}" action="saveProfile" />
			
			<a data-toggle="modal" href="#passwordModal" class="btn"> 
				<g:if test="${user?.password}">
					<g:message code="user.profile.change.password" />
				</g:if> <g:else>
					<g:message code="user.profile.generate.password" />
				</g:else>
			</a>
			
			<g:link class="btn" controller="user" action="unsubscribe"><g:message code="user.delete"/></g:link>
			<g:link class="btn" controller="user" action="showProfile"><g:message code="default.cancel.label"/></g:link>
		</div>	
	</g:form>

	<script type="text/javascript">
		jQuery(document).ready(function() {

			if (!"${user?.facebookUid}") {
				setFacebookUsername('facebookLoggedInUserName')
			} else {
				$("#facebookLoggedInUserInfo").remove();
				$("#facebookButton").remove();
			}

			$('input[id=imageFile]').change(function() {
				$('#uploadProfileImageButton').click();
			});

			$('input[id=useFacebookProfileImageCheckBox]').change(function() {
				$('#useFacebookProfileImageButton').click();
			});
		});

		function logoutSesionFBProfile() {
			var url = window.location.href;
			FB.logout(function(response) {
				location.href = url;
			});
		}

		function attachFacebookAccount() {
			FB.getLoginStatus(function(response) {
				if (response.status === 'connected') {
					location.href = "${createLink(action: 'attachFacebookAccount', controller: 'user')}"
				}
			});
		}
	</script>
</body>
</html>
